<template>
  <view class="detail-card" :style="{ width }">
    <view class="dashed-line"></view>
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";

defineProps({
  width: { type: String, default: "100%" },
});

onMounted(() => {});
</script>


<style lang="scss" scoped>
.detail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 22rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0px 2rpx 6rpx rgba(0, 0, 0, 0.03);
  overflow: hidden;

  .dashed-line {
    position: absolute;
    top: 0;
    width: 594rpx;
    height: 4rpx; /* 设置元素的高度为1像素 */
    background: repeating-linear-gradient(
      to right,
      #f2f0ec,
      #f2f0ec 15rpx,
      transparent 30rpx
    ); /* 创建一条虚线背景 */
  }
}
</style>